<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">流量数据</div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">当日流量监控</li>
                                    <li>本周流量监控</li>
                                    <li>本月流量监控</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div id="line_day" style="width: 600px;height:300px;"></div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div id="line_week" style="width: 600px;height:300px;"></div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div id="line_month" style="width: 600px;height:300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">分布数据</div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">当日流量分布</li>
                                    <li>本周流量分布</li>
                                    <li>本月流量分布</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div id="pie_day" style="width: 600px;height:300px;"></div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div id="pie_week" style="width: 600px;height:300px;"></div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div id="pie_month" style="width: 600px;height:300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">请求来源</div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">按时间排序</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <table class="layui-hide" id="api_manage" lay-filter="api_manage"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>


    jQuery.ajax({
        url: "/admin/interface/data/time.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {

        console.log(data);
        loadLine(data);

    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });

    /**
     * 载入折线图
     * @param data
     */

    var lineArr = ["line_day", "line_week", "line_month"];

    function loadLine(data) {

        for (var q = 0; q < 3; q++) {
            var LineChart;
            //赋值给chart
            var thisChart = LineChart;
            //处理数据
            var res;
            if (q == 0) {
                res = data.day;
            }
            else if (q == 1) {
                res = data.week;
            }
            else {
                res = data.month;
            }
            var name = [];
            var segArr = [];
            var senArr = [];
            var disArr = [];
            var weiboArr = [];
            for (var i = 0; i < res.length; i++) {
                if (q == 0) {
                    name.push(res[i].time);
                }
                else if (q == 1) {
                    name.push("周" + (res[i].day + 1));
                }
                else {
                    name.push((res[i].day + 1) + "日");
                }

                for (var j = 0; j < 4; j++) {

                    if (res[i].count[j].name == '词法分析接口') {
                        var obj = new Object();
                        obj.name = "词法分析接口";
                        obj.value = res[i].count[j].count;
                        segArr.push(obj);
                    }
                    if (res[i].count[j].name == '句法分析接口') {
                        var obj = new Object();
                        obj.name = "句法分析接口";
                        obj.value = res[i].count[j].count;
                        senArr.push(obj);

                    }
                    if (res[i].count[j].name == '语篇分析接口') {
                        var obj = new Object();
                        obj.name = "语篇分析接口";
                        obj.value = res[i].count[j].count;
                        disArr.push(obj);

                    }
                    if (res[i].count[j].name == '微博分析接口') {
                        var obj = new Object();
                        obj.name = "微博分析接口";
                        obj.value = res[i].count[j].count;
                        weiboArr.push(obj);

                    }
                }
            }
            // 基于准备好的dom，初始化ECharts实例
            if (thisChart != null && thisChart != "" && thisChart != undefined) {
                thisChart.dispose();
            }
            thisChart = echarts.init(document.getElementById(lineArr[q]), 'macarons');
            thisChart.showLoading();

            var option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['句法分析接口', '词法分析接口', '语篇分析接口', '微博分析接口']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: name
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "词法分析接口",
                        data: segArr,
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: "句法分析接口",
                        data: senArr,
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: "语篇分析接口",
                        data: disArr,
                        type: 'line',
                        areaStyle: {}
                    },
                    {
                        name: "微博分析接口",
                        data: weiboArr,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };

            thisChart.hideLoading();
            thisChart.setOption(option, true);
        }


    }


    /**
     * 饼图的ajax
     */

    jQuery.ajax({
        url: "/admin/interface/totalData/time.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {

        console.log(data);
        loadPie(data);

    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });

    /**
     * 载入折线图
     * @param data
     */
    var pieChart;

    var pieArr = ["pie_day", "pie_week", "pie_month"];

    function loadPie(data) {
        for (var q = 0; q < 3; q++) {
            //赋值给chart
            var thisChart = pieChart;
            //处理数据
            var res = data.data;
            var name = [];
            var list = [];
            var res;
            if (q == 0) {
                res = data.day;
            }
            else if (q == 1) {
                res = data.week;
            }
            else {
                res = data.month;
            }
            for (var i = 0; i < res.length; i++) {

                name.push(res[i].time);
                for (var j = 0; j < 4; j++) {

                    if (res[i].count[j].name == '词法分析接口') {
                        var obj = new Object();
                        obj.name = "词法分析接口";
                        obj.value = res[i].count[j].count;
                        list.push(obj);
                    }
                    if (res[i].count[j].name == '句法分析接口') {
                        var obj = new Object();
                        obj.name = "句法分析接口";
                        obj.value = res[i].count[j].count;
                        list.push(obj);

                    }
                    if (res[i].count[j].name == '语篇分析接口') {
                        var obj = new Object();
                        obj.name = "语篇分析接口";
                        obj.value = res[i].count[j].count;
                        list.push(obj);

                    }
                    if (res[i].count[j].name == '微博分析接口') {
                        var obj = new Object();
                        obj.name = "微博分析接口";
                        obj.value = res[i].count[j].count;
                        list.push(obj);

                    }
                }
            }

            // 基于准备好的dom，初始化ECharts实例
            if (thisChart != null && thisChart != "" && thisChart != undefined) {
                thisChart.dispose();
            }
            thisChart = echarts.init(document.getElementById(pieArr[q]), 'macarons');
            thisChart.showLoading();

            var option = {
                title: {
                    text: 'API 流量分布图',
                    subtext: '调用占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: ['句法分析接口', '词法分析接口', '语篇分析接口', '微博分析接口'],

                    selected: data.selected
                },
                series: [
                    {
                        name: 'API 流量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: list,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            thisChart.hideLoading();
            thisChart.setOption(option, true);

        }
    }
</script>


<!--获取API来源的信息-->
<script>

    var mydata;
    //发送异步请求
    jQuery.ajax({
        url: "/admin/interface/all.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {
        mydata = data.data;
        for (var i = 0; i < mydata.length; i++) {
            mydata[i].id = (i + 1);
            mydata[i].time = stamp2Time(mydata[i].time / 1000);
        }
        layui.use('table', function () {
            var table = layui.table
                , form = layui.form;
            table.render({
                elem: '#api_manage'
                , data: mydata
                , cellMinWidth: 80
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', unresize: true, sort: true}
                    , {field: 'name', title: '用户名', sort: true}
                    , {field: 'uri', title: '访问的链接', sort: true}
                    , {field: 'time', title: '访问时间',sort: true}
                    , {field: 'ip', title: '主机IP', sort: true}
                ]]
                , page: true
            });
        });
    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });


    function stamp2Time(timestamp) {

        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }


</script>


<!--<%&#45;&#45;两个图表的加载&#45;&#45;%>-->
<script src="/static/layui/js/charts/Echarts/map/js/staticMap.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts.min.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts-gl.js"></script>
<script src="/static/layui/js/charts/Echarts/map/js/china.js"></script>
<!-- 引入echart的主题 -->
<script src="/static/layui/js/charts/Echarts/theme/macarons.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/roma.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/shine.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/infographic.js"></script>